<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<button>发送请求</button>
	<button>取消请求</button>
	<div id="app"></div>
</body>
<script>
	const btns = document.querySelectorAll("button");
	const app = document.querySelector("#app");
	let xhr;
	btns[0].onclick = function(){
		if(xhr) xhr.abort();
		app.innerHTML = "<h3>数据正在加载中……</h3>";
		
		xhr = new XMLHttpRequest();
		xhr.open("get","/myJson");
		xhr.send();
		xhr.onload = function(){
			app.innerHTML = "<h3>"+xhr.response+"</h3>"
		}
		// 如果取消了请求，会执行该回调函数（你定义的，但不是你执行的。）
		xhr.onabort = function(){
			app.innerHTML = "<h3>请求被取消啦！</h3>"
		}
	}
	btns[1].onclick = function(){
		if(xhr)
			xhr.abort();
	}
	
</script>
</html>